import React, {Component} from 'react';
import cs from 'classnames';
import BaseCmpt from '../BaseCmpt';
import './index.css';
import Util from '../../common/util';
import Config from '../../config';

class TabBar extends BaseCmpt {

    static defaultProps = {
        app: {},
        data: {
            type: 6,
            dataset: {
                tabBar: null,
                tabBarMap: {},
            },
            style: {}
        },
    };

    constructor(props) {
        super(props);
        var {app, data} = props;
        var isDc = (app.appType || []).indexOf(Config.appTypeMap.dc) > -1;

        if (!data.dataset.tabBar) {
            if (isDc) {
                data.dataset.tabBar = {
                    "color": "#818183",
                    "selectedColor": "#000",
                    "borderStyle": "black",
                    "backgroundColor": "#fff",
                    "list": [{
                        "pagePath": "pages/mall/mall",
                        "iconPath": "./images/tabs/index.png",
                        "selectedIconPath": "./images/tabs/index-sel.png",
                        "text": "首页",
                        "_original": true,
                        "_uid": Util.getUId(),
                        "_deleted": false
                    }, {
                        "pagePath": "pages/zDianCan/index",
                        "iconPath": "./images/tabs/cart.png",
                        "selectedIconPath": "./images/tabs/cart-sel.png",
                        "text": "下单",
                        "_original": true,
                        "_uid": Util.getUId(),
                        "_deleted": false
                    }, {
                        "pagePath": "pages/mine/mine",
                        "iconPath": "./images/tabs/mine.png",
                        "selectedIconPath": "./images/tabs/mine-sel.png",
                        "text": "我的",
                        "_original": true,
                        "_uid": Util.getUId(),
                        "_deleted": false
                    }]
                }
            } else {
                data.dataset.tabBar = {
                    "color": "#818183",
                    "selectedColor": "#000",
                    "borderStyle": "black",
                    "backgroundColor": "#fff",
                    "list": [{
                        "pagePath": "pages/mall/mall",
                        "iconPath": "./images/tabs/index.png",
                        "selectedIconPath": "./images/tabs/index-sel.png",
                        "text": "首页",
                        "_original": true,
                        "_uid": Util.getUId(),
                        "_deleted": false
                    }, {
                        "pagePath": "pages/cart/cart",
                        "iconPath": "./images/tabs/cart.png",
                        "selectedIconPath": "./images/tabs/cart-sel.png",
                        "text": "购物车",
                        "_original": true,
                        "_uid": Util.getUId(),
                        "_deleted": false
                    }, {
                        "pagePath": "pages/mine/mine",
                        "iconPath": "./images/tabs/mine.png",
                        "selectedIconPath": "./images/tabs/mine-sel.png",
                        "text": "我的",
                        "_original": true,
                        "_uid": Util.getUId(),
                        "_deleted": false
                    }]
                }
            }
        } else {
            if (isDc) { //兼容处理老版本的点餐购物车bug
                let list = data.dataset.tabBar.list;
                list.some(function (item) {
                    if (item.pagePath.indexOf('pages/cart/cart') > -1) {
                        item.pagePath = 'pages/zDianCan/index';
                        return true;
                    }
                });
            }
        }
        this.state = {
            data: data,
        };
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, dataset} = data;
        if (!dataset) {
            return null;
        }
        var {tabBar, tabBarMap, status = '1'} = dataset;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'tabBar cmptEle': true, 'cmptEle_selected': selected, 'tabBar_disabled': status == '0'})}
                style={style}
            >
                {
                    tabBar.list.map(function (item, index) {
                        var imgName = item.iconPath.match(/[^/]+\.png/)[0];

                        if (item._deleted) {
                            return null;
                        }
                        return (
                            <div className="tabBarItem" key={index}>
                            <span className="tabBarItem__icon"
                                  style={{'backgroundImage': 'url(http://img.taojinzi.com/xcx/admin/imgs/tabs/' + imgName + ')'}}></span>
                                <p className="tabBarItem__text">{item.text}</p>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default TabBar;
